<template>
  <div class="add-brand" v-if="shop">
    <div class="top">
      <div class="input-box">
        <panel-input title="商场" placeholder="请选择" class="mall-select" :value="form.shop" :readonly="true" @click.native="showActionSheet">
          <span>
            <i></i>
          </span>
        </panel-input>
        <panel-input title="品牌" placeholder="例如：劳芬" @change="handleChange" />
      </div>
    </div>
    <div class="btn">
      <my-button name="确定" @btnClick="handleBtnClick" />
    </div>
    <van-action-sheet
      :round="false"
      v-model="show"
      :actions="shop"
      cancel-text="取消"
      close-on-click-action
      @select="handleSelect"
    />
  </div>
</template>
<script>
import PanelInput from '@/components/panel-input'
import { getStaticsConfig } from '@/api/my'
const ERR_OK = 200
export default {
  components: {
    PanelInput
  },
  data () {
    return {
      show: false,
      shop: null,
      form: {
        shop: '',
        brand: '',
        shop_id: ''
      }
    }
  },
  created () {
    this._getStaticsConfig()
  },
  methods: {
    handleBtnClick () {
      if (!this.form.shop) {
        this.$toast('请选择商城~')
        return
      }
      if (!this.form.brand) {
        this.$toast('请输入品牌~')
        return
      }
      this.$emit('brandChange', this.form)
      this.$router.go(-1)
    },
    handleSelect (action) {
      this.form.shop = action.name
      this.form.shop_id = action.id
    },
    handleChange (input) {
      this.form.brand = input
    },
    showActionSheet () {
      this.show = true
    },
    _getStaticsConfig () {
      getStaticsConfig()
        .then(res => {
          if (res.code === ERR_OK) {
            this.shop = res.data.shop
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";
.add-brand {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  touch-action: none;
  background: #fff;
  padding: 0 0.36rem;
  box-sizing: border-box;
  .top {
    padding: 0.44rem 0;
    box-sizing: border-box;
    .input-box {
      padding: 0.44rem 0 0 0;
      .mall-select {
        span {
          height: 0.72rem;
          @include vCenter();
          display: flex;
          right: 0.37rem;
          padding: 0 0.2rem;
          align-items: center;
          i {
            display: inline-block;
            width: 0.09rem;
            height: 0.16rem;
            background: url("../../../assets/images/_1.png") no-repeat;
            background-size: cover;
          }
        }
      }
    }
  }
  .btn {
    width: 100%;
    padding: 0 0.76rem;
    box-sizing: border-box;
    font-size: 0;
    position: absolute;
    left: 0;
    bottom: 2rem;
  }
}
</style>
